<script setup lang="ts">
import type {AutoFormProps, AutoFormEmits} from "@/interface/auto-form.ts"
import {reactive, ref, toRefs} from "vue"
import {FormInstance, UploadProps} from "element-plus"
import {Plus} from "@element-plus/icons-vue"
import {useStore} from "vuex"

// const {model, dialogVisible, title} = defineProps<AutoFormProps>()
const props = defineProps<AutoFormProps>()
const {model, dialogVisible, title} = toRefs(props)
const emits = defineEmits<AutoFormEmits>()
const formRef = ref<FormInstance>()
const store = useStore()
const isSubmit = ref(false)
const headers = ref({
  Authorization: store.getters["auth/getToken"]
})
const data = ref<any>({})
const onSubmit = async (formEl: FormInstance | undefined) => {
  isSubmit.value = true
  data.value = {}
  Object.keys(model.value).forEach(value => {
    data.value[value] = model.value[value].value
  })
  if (!formEl) {
    isSubmit.value = false
    return
  }
  await formEl.validate(async (valid) => {
    if (valid) {
      emits("onSubmit", data.value)
      isSubmit.value = false
    } else {
      isSubmit.value = false
    }
  })
}
const onCancel = ():void => {
  emits("onCancel")
}

const handleMovieImageSuccess: UploadProps['onSuccess'] = (
    response
) => {
  emits("handleUpload",response.data)
  // Object.keys(model).forEach(value => {
  //   if (model[value].itemType === 'image') {
  //     model.value[value].value = response.data
  //   }
  // })
}

</script>

<template>
  <div class="dialog">
    <el-dialog
        :model-value="dialogVisible"
        :title="title"
        width="40%"
        @close="onCancel"
    >
      <el-form
          ref="formRef"
          :model="model"
          label-position="right"
          label-width="100px"
      >
        <template v-for="(item,index) in model">
          <el-form-item
              :key="index"
              :label="item.name"
              :prop="index+'.value'"
              :rules="item.rules"
              v-if="item.itemType !== 'none'"
          >
            <el-input v-if="item.itemType === 'input'" v-model="item.value" :placeholder="item.placeholder"></el-input>
            <el-input-number v-if="item.itemType === 'input-number'" v-model="item.value" :min="1" :max="12"  />
            <el-input-number v-if="item.itemType === 'input-float'" v-model="item.value" :min="1" :precision="2" :step="0.1" :max="100000"  />
            <el-select v-if="item.itemType === 'select'" v-model="item.value" :placeholder="item.placeholder">
              <el-option v-for="(option,i) in item.options" :label="option.label" :value="option.value" :key="i"/>
            </el-select>
            <el-date-picker
                v-if="item.itemType === 'date'"
                v-model="item.value"
                :type="item.options.type"
                :value-format="item.options.valueFormat"
                :placeholder="item.placeholder"
            />
            <el-radio-group v-if="item.itemType === 'radio'" v-model="item.value">
              <el-radio v-for="(option,i) in item.options" :label="option.value" size="large" :key="i">
                {{ option.label }}
              </el-radio>
            </el-radio-group>
            <el-upload
                v-if="item.itemType === 'image'"
                class="avatar-uploader"
                action="http://localhost/api/admin/upload"
                :headers="headers"
                :show-file-list="false"
                :on-success="handleMovieImageSuccess"
            >
              <img v-if="item.value" :src="item.value" class="avatar"/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onSubmit(formRef)" :disabled="isSubmit" :loading="isSubmit">
        确认
      </el-button>
    </span>
      </template>

    </el-dialog>
  </div>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>